<template>
	<view class="upload">
		<view class="u-margin-bottom-20 u-flex u-row-between" v-for="(item,index) in list" :key="index">
			<view class="upload-left">
				<image class="icon" src="@/static/img/icon-annexjpg@2x.png" v-if="getFileType(item) === 'picture'">
				</image>
				<image class="icon" src="@/static/img/icon-annexpdf@2x.png" v-else-if="getFileType(item) === 'file'">
				</image>
				<view class="content">
					<view class="title">附件.{{getFileSuffix(item)}}</view>
					<view class="describe">收费票据、凭证等</view>
				</view>
			</view>
			<view class="upload-right">
				<view class="upload-preview" @click="openFile(item)">预览</view>
				<image class="upload-del" src="@/static/img/icon-delete@2x.png" @click="handleDelOpen(index)"></image>
			</view>
		</view>
		<image @click="handleTypeOpen" class="upload-button" src="@/static/img/icon-annexupload@2x.png"></image>
		<u-action-sheet :list="types" v-model="shows.type" @click="handleType"></u-action-sheet>
		<c-confirm v-model="shows.del" @submit="handleDel" />
	</view>
</template>

<script>
	import {
		openFile
	} from '@/utils/index.js'
	import cConfirm from '@/components/c-confirm/index.vue'
	export default {
		name: 'cUpload',
		components: {
			cConfirm
		},
		data() {
			return {
				shows: {
					type: false,
					del: false
				},
				types: [{
					text: '拍照'
				}, {
					text: '相册'
				}, {
					text: '文件'
				}],
				delIndex: 0
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: [Array, String],
				default: []
			},
			type: {
				type: String,
				default: 'Array' // String   双向绑定是数组还是字符
			}
		},
		computed: {
			list: {
				get() {
					if (this.type === 'Array') {
						return this.value
					} else if (this.type === 'String' && this.value) {
						return [this.value]
					} else {
						return []
					}
				},
				set(d) {
					
					if (this.type === 'Array') {
						this.$emit('input', d || [])
					} else if (this.type === 'String') {
						this.$emit('input', d[d.length - 1] || '')
					}
				}
			},
			getFileSuffix() {
				return function(url) {
					const suffix = url.split('.').pop().toLocaleLowerCase();
					return suffix || '-';
				}
			},
			getFileType() {
				return function(url) {
					if (!url) return '-'
					// file 文件  picture 图片
					const file = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']
					const picture = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp']
					const suffix = url.split('.').pop().toLocaleLowerCase();
					if (file.includes(suffix)) {
						return 'file'
					} else if (picture.includes(suffix)) {
						return 'picture'
					}
					return '-';
				}
			}
		},
		methods: {
			handleTypeOpen() {
				this.shows.type = true
			},
			handleType(index) {
				const that = this
				switch (index) {
					case 0:
						// 拍照 
						uni.chooseImage({
							count: 1,
							sizeType: ['original', 'compressed'],
							sourceType: ['camera'],
							success: (res) => {
								that.uploadFiles(res)
							}
						});
						break;
					case 1:
						uni.chooseImage({
							count: 1,
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success: (res) => {
								that.uploadFiles(res)
							}
						});
						break;
					case 2:
						uni.chooseMessageFile({
							count: 1, //限制选择的文件数量
							type: 'all',
							success(res) {
								that.uploadFiles(res)
							}
						})
						break;
					default:
						break;
				}
			},
			uploadFiles(res) {
				const that = this
				let path;
				if(res.tempFilePaths && res.tempFilePaths.length>0){
					path = res.tempFilePaths[0]
				}else if(res.tempFiles && res.tempFiles.length>0){
					path = res.tempFiles[0].path
				}
				this.uploadFile(path).then(data => {
					const list = JSON.parse(JSON.stringify(this.list))
					list.push(data.result.url)
					this.list = list
				})
			},
			handleDelOpen(index) {
				this.delIndex = index
				this.shows.del = true
			},
			handleDel() {
				const list = JSON.parse(JSON.stringify(this.list))
				list.splice(this.delIndex, 1);
				this.list = list
			},
			openFile
		}
	}
</script>

<style scoped lang="less">
	.icon {
		width: 36px;
		height: 46px;
	}

	.upload-left {
		display: flex;

		.content {
			margin-left: 15px;
			display: flex;
			flex-flow: column;
			justify-content: space-around;

			.title {
				font-size: 16px;
				color: #202020;
				font-weight: 400;
			}

			.describe {
				font-size: 12px;
				color: #999999;
			}
		}
	}

	.upload-right {
		display: flex;
		align-items: center;

		.upload-preview {
			margin-right: 23px;
			background: #FFFFFF;
			border-radius: 15px;
			border: 1px solid #EBECEB;
			padding: 4px 8px;
			color: #999999;
			font-size: 12px;
		}

		.upload-del {
			width: 16px;
			height: 16px;
		}
	}

	.upload-button {
		width: 46px;
		height: 46px;
	}
</style>